<template>
  <div class="mb-20 relative">
    <div class="divTip3">
      <span>{{ $t('other.numberOfInputTasks') }}</span>
      <div  class="point-mo"><span>2</span></div>
    </div>
    <div v-if="!props.isEdit" class="make-detail-header">
      <div>
        <img src="../../../../assets/images/project.png" alt="">
        <b class="ml-5">{{ $t('hangManage.makeInfo') }}</b>
      </div> 
      <a-button type="primary"  class="h-28" @click="allOnline">{{ $t('hangManage.allSchedule') }}</a-button>
    </div>
    <a-form ref="makeForm" :model="dataSource">
      <a-table rowKey="index" bordered size="small" :dataSource="dataSource" :columns="colunms" :pagination="false" class="form-table" :scroll="{y: 300, x: 1000}">
        <template #headerCell="{ column }">
          <template v-if="column.key === 'poNo'">
            {{$t('hangManage.poNo')}}
            <a-divider type="vertical" />
            {{$t('hangManage.bedNo')}}
            <a-divider type="vertical" />
            {{$t('hangManage.cut')}}
          </template>
          <template v-for="item in requireMakeColumns" :key="item.value">
            <template v-if="column.key === item.value">
              <span class="text-red">*</span>{{item.label}}
            </template>
          </template>
        </template>
        <template #bodyCell="{ column, record, index }"> 
          <template v-if="column.key === 'poNo'">
            {{record.poNo || '/'}}
            <a-divider type="vertical" />
            {{record.cutterNo || '/'}}
            <a-divider type="vertical" />
            {{record.tailorBill || '/'}}
          </template> 
          <template v-if="column.key === 'produceQty'">
            <!-- <a-form-item :name="[index, 'produceQty']" :class="{'beyond-number': getValue(record)}" :rules="{ required: true, message: '请输入任务数量', trigger: 'change'}"> -->
            <a-form-item :name="[index, 'produceQty']" :rules="{ required: true, message: $t('other.enterTaskNo'), trigger: 'change'}" :class="{'single-border': !record.produceQty}">
              <a-input-number :placeholder="$t('common.pleaseInput')" v-model:value="record.produceQty" allowClear :min="0" :precision="0" />
            </a-form-item>
          </template>
          <template v-if="column.key === 'unit'">
            <a-form-item :name="[index, 'unit']" :rules="{ required: true, message: $t('other.enterUnit'), trigger: 'change'}">
              <a-input-number :placeholder="$t('common.pleaseInput')" v-model:value="record.unit" allowClear :min="1" :precision="0" />
            </a-form-item>
          </template>
          <template v-if="column.key === 'overProduceQty'">
            <!-- <a-form-item :name="[index, 'overProduceQty']" :rules="[{ validator: validateQty, trigger: 'change' }]"> -->
           <a-form-item :name="[index, 'overProduceQty']">
              <a-input-number :placeholder="$t('common.pleaseInput')" v-model:value="record.overProduceQty" :min="0" :precision="0" allowClear />
            </a-form-item>
          </template>
          <template v-if="column.key === 'planFinishTime'">
            <a-form-item :name="[index, 'planFinishTime']">
              <a-date-picker value-format="YYYY-MM-DD" v-model:value="record.planFinishTime" :disabled-date="disabledDate" />
            </a-form-item>
          </template>
        </template>
      </a-table>
    </a-form>
  </div>
</template>
<script setup name="makeDetailTable">
import { serialNumberInfo, _makeColumns, requireMakeColumns } from './wipConfig'
import { computed, ref, watch } from 'vue'
import { cloneDeep } from 'lodash'
import moment from 'moment'
// import {getLocalStorage} from "@/utils";
const props = defineProps({
  isEdit: {
    type: Boolean,
    default: false
  },
  tableData: {
    type: Array,
    default: () => []
  },
  produceOnlineTime: {
    type: [String, Object, Date]
  }
})
let dataSource = ref([])
const makeForm = ref()
const colunms = computed(() => {
  const data = cloneDeep(_makeColumns)
  props.isEdit ? data : data.unshift(serialNumberInfo)
  return data
})
const initTableData = (ary) => {
  dataSource.value = cloneDeep(ary)
  dataSource.value.forEach(item => {
    item.unit = item.unit || 1
    item.overProduceQty = item.overProduceQty || 0
  })
}
const allOnline = () => {
  dataSource.value.forEach(item => {
    item.produceQty = item.unassignedQty <= 0 ? 0 : item.unassignedQty
  })
}
// const getValue = (record) => {
//   let { assignedQty, produceQty, quantity, overProduceQty } = record
//   return changeNumber(assignedQty) + changeNumber(produceQty) > changeNumber(quantity) + changeNumber(overProduceQty)
// }
// const changeNumber = (text) => {
//   return text ? Number(text) : 0
// }
// 超产数量
/*
const validateQty = async (_rule, value) => {
  let allowMaxOverproduction = getLocalStorage('allowMaxOverproduction') || 0
  if (!value && value !== 0) {
    return Promise.reject(t('common.pleaseInput'));
  } else if (value > allowMaxOverproduction) {
    return Promise.reject( t('other.maxSysNo'));
  } else {
    return Promise.resolve();
  }
}
*/
const disabledDate = (current) => {
  return current && props.produceOnlineTime && current <= moment(props.produceOnlineTime).valueOf()
}
watch(() => props.tableData, (newVal) => {
  initTableData(newVal || [])
}, { deep: true, immediate: true })

defineExpose({
  makeForm,
  dataSource
})
</script>
